<template>
    <div class="c-bug-page">
        <TrainPage
            ref="TrainPageRef"
            :searchConfig="searchConfig"
            :tableConfig="tableConfig"
            sendUrl="get_c_bugs"
            customize
        >
            <template slot="important_number" slot-scope="{ record }">
                <el-select
                    v-model="record.important_number"
                    placeholder="请选择"
                    @change="inputChange(record)"
                >
                    <el-option
                        v-for="item in important_number_options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </template>
        </TrainPage>

        <e-dialog
            :clickModal="false"
            :footer="false"
            auto
            v-model="visable"
            :title="rowCopy._id ? '编辑' : '新增'"
            @closed="dialogClosed"
            @confirm="confirm"
        >
            <div class="p-20">
                <div class="flex-wrap">
                    <div class="flex-wrap flex-center-wrap p-l-20">
                        bug类型：
                        <el-select clearable v-model="rowCopy.c_bug_type" placeholder="请选择">
                            <el-option
                                v-for="item in optionsType1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="flex-wrap flex-center-wrap p-l-20">
                        权重：
                        <el-select
                            clearable
                            v-model="rowCopy.important_number"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in important_number_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="d-main flex-wrap p-b-20 p-t-10 m-t-10">
                    <mavonEditor
                        upload_file_url="bug_c"
                        v-model="rowCopy.content"
                        className="h-vh-60"
                        @change="editorChange"
                    ></mavonEditor>
                </div>
            </div>
        </e-dialog>
    </div>
</template>

<script>
// 编辑器插件
import adminApi from '@/api/blog/admin'
export default {
    components: {
        mavonEditor: () => import('@/components/mavonEditor/index.vue'),
    },
    data() {
        return {
            important_number_options: [],
            searchConfig: [
                {
                    label: '内容',
                    type: 'input',
                    modelName: 'keywords',
                },

                {
                    label: 'bug状态',
                    type: 'select',
                    modelName: 'type',
                    options: [
                        {
                            label: '未解决',
                            value: '1',
                        },
                        {
                            label: '已解决',
                            value: '2',
                        },
                    ],
                },
                {
                    label: 'bug类型',
                    type: 'select',
                    modelName: 'c_bug_type',
                    options: [
                        {
                            label: '其他',
                            value: '1',
                        },
                        {
                            label: '工作',
                            value: '2',
                        },
                    ],
                },
                {
                    label: '权重',
                    type: 'select',
                    modelName: 'important_number',
                    options: () => {
                        this.important_number_options = []
                        for (let index = 0; index < 5; index++) {
                            this.important_number_options.push({
                                label: index + 1,
                                value: index + 1,
                            })
                        }
                        return this.important_number_options
                    },
                },
                {
                    label: '排序方式',
                    type: 'select',
                    modelName: 'sort_type',
                    options: [
                        {
                            label: '按跟新时间倒序',
                            value: '1',
                        },
                        {
                            label: '按权重倒序',
                            value: '2',
                        },
                    ],
                },
                {
                    label: '跟新时间',
                    type: 'datetimerange',
                    modelName: ['start_time', 'end_time'],
                    isArray: true,
                    valueType: 'timestamp',
                    pickerOptions: this.getPickerOptions([9, 10]),
                },
            ],
            tableConfig: {
                isSelection: false,
                maxHeightFlag: false,
                stripe: true,
                btns: {
                    children: [
                        {
                            type: 'primary',
                            label: '新增',
                            clickFn: (row) => {
                                this.openDialog()
                            },
                        },
                    ],
                },
                columnObj: [
                    {
                        label: '详情',
                        props: 'html_edit',
                        html: true,
                    },
                    {
                        label: '权重',
                        props: 'important_number',
                        slot: 'important_number',
                        width: 200,
                    },
                    {
                        label: '更新时间',
                        props: 'update_time',
                        width: 200,
                        render: ({ update_time }) => {
                            return this.klDateFormat(update_time)
                        },
                    },

                    {
                        label: '操作',
                        slot: 'projectDetail',

                        props: 'action',
                        lock: true,
                        fixed: 'right',
                        children: [
                            {
                                label: '编辑',
                                type: 'primary',
                                clickFn: (row) => {
                                    this.edit(row)
                                },
                            },
                            {
                                label: '已修改',
                                type: 'info',
                                type: 'warning',
                                show: (row) => {
                                    return row.type == 1
                                },
                                clickFn: (row) => {
                                    this.changeType(row)
                                },
                            },
                            {
                                label: '未修改',
                                type: 'info',
                                type: 'info',
                                show: (row) => {
                                    return row.type == 2
                                },
                                clickFn: (row) => {
                                    this.changeType(row)
                                },
                            },
                        ],
                    },
                ],
            },
            timer: null,
            rowCopy: {
                _id: '',
                content: '',
                html_edit: '',
                c_bug_type: '1',
                important_number: 3,
            },
            visable: false,
            params: {
                type: '1',
                c_bug_type: '',
            },
            tableData: [],
            isLoading: true,
            scrollHeight: 0,
            pageOption: {
                pageSizes: [10, 15, 20, 50],
                limit: 20,
                total: 0,
                page: 1,
            },

            // 1 其他  2 工作
            optionsType1: [
                {
                    label: '其他',
                    value: '1',
                },
                {
                    label: '工作',
                    value: '2',
                },
            ],
        }
    },
    async created() {
        const { type = '' } = this.$route.query || {}
        type == 1 && this.openDialog()
        this.rowCopy.c_bug_type = await this.getStore('err_info_c_type', '1')
        // 删除参数
        this.updateUrl('type', null)
    },
    methods: {
        inputChange(row) {
            this.rowCopy = this.deepClone(row)
            this.editorChange({
                str: row.content,
                html: row.html_edit,
            })
            this.confirm()
        },
        changeType(row) {
            let { type, _id } = row
            row.type = +type === 1 ? '2' : '1'
            adminApi
                .post_c_bug(row)
                .then((res) => {
                    this.$message.success('操作成功')
                    this.$refs.TrainPageRef.tableData = this.$refs.TrainPageRef.tableData.filter(
                        (row) => row._id !== _id,
                    )
                })
                .catch(() => {})
        },
        edit(row) {
            this.visable = true
            this.rowCopy = this.deepClone(row)
        },
        async confirm() {
            let { _id, type, c_bug_type, important_number, content, html_edit } = this.rowCopy
            if (!content || !html_edit) {
                this.$message.error('请输入内容')
                return
            }
            let params = {
                _id,
                content,
                html_edit,
                type: type ? type : '1',
                c_bug_type,
                important_number,
            }

            try {
                const res = await adminApi.post_c_bug(params)
                this.$message.success('操作成功')
                this.visable = false
                if (!_id) {
                    this.initTable()
                    return
                }
                this.putTableData(res?.data?.data)
            } catch (err) {
                this.Toast(err)
            }
        },
        editorChange({ str: content, html: html_edit }) {
            Object.assign(this.rowCopy, {
                content,
                html_edit,
            })
        },
        dialogClosed() {
            this.visable = false
            Object.assign(this.rowCopy, {
                _id: '',
                content: '',
                html_edit: '',
                important_number: 3,
            })
        },
        openDialog() {
            this.visable = true
        },
    },
}
</script>

<style lang="scss" scoped>
.d-main {
    padding: 0 20px;
    height: 80vh;
}
.pos-close {
    font-weight: 700;
    font-size: 24px;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

::v-deep {
    .bug-c-movon-editor {
        width: 100%;
    }
    .el-table img {
        max-width: 100%;
    }
}
</style>
